<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>SLIDER REVOLUTION -  The Responsive Slider jQuery Plugin</title>

	<style type="text/css">
		* { margin: 0; padding: 0;}
	</style>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

    <!-- CSS STYLE -->
    <link rel="stylesheet" type="text/css" href="css/rs-style.css" media="screen" />

	<!-- REVOLUTION BANNER CSS SETTINGS -->
	<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
</head>

<body class="body-dark">

<div class="fullwidthbanner-container">
	<div class="fullwidthabnner">
		<ul>
			<!-- THE FIRST SLIDE -->
			<li data-transition="3dcurtain-vertical" data-slotamount="10" data-masterspeed="300" data-thumb="images/thumbs/thumb1.jpg">
				<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
				<img src="images/slides/wide1.jpg" >

				<!-- THE CAPTIONS IN THIS SLDIE -->
				<div class="caption large_text sfb"
					 data-x="176"
					 data-y="15"
					 data-speed="300"
					 data-start="800"
					 data-easing="easeOutExpo">
					 OVER 
					 <span style="color: #ffcc00;">1000</span> 
					 SATISFIED CUSTOMERS
				</div>

				<div class="caption randomrotate"
					 data-x="189"
					 data-y="76"
					 data-speed="600"
					 data-start="1100"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p1.jpg" alt="Image 2">
				</div>

				<div class="caption randomrotate"
					 data-x="0"
					 data-y="92"
					 data-speed="600"
					 data-start="1200"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p2.jpg" alt="Image 3">
				</div>

				<div class="caption randomrotate"
					 data-x="200"
					 data-y="209"
					 data-speed="600"
					 data-start="1300"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p3.jpg" alt="Image 4">
				</div>

				<div class="caption randomrotate"
					 data-x="97"
					 data-y="117"
					 data-speed="300"
					 data-start="1400"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p4.jpg" alt="Image 5">
				</div>

				<div class="caption randomrotate"
					 data-x="14"
					 data-y="222"
					 data-speed="600"
					 data-start="1500"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p5.jpg" alt="Image 6">
				</div>

				<div class="caption randomrotate"
					 data-x="638"
					 data-y="201"
					 data-speed="300"
					 data-start="1600"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p6.jpg" alt="Image 7">
				</div>

				<div class="caption randomrotate"
					 data-x="717"
					 data-y="294"
					 data-speed="300"
					 data-start="1700"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p7.jpg" alt="Image 8">
				</div>

				<div class="caption randomrotate"
					 data-x="682"
					 data-y="79"
					 data-speed="300"
					 data-start="1800"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p8.jpg" alt="Image 9">
				</div>

				<div class="caption randomrotate"
					 data-x="807"
					 data-y="71"
					 data-speed="300"
					 data-start="1900"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p9.jpg" alt="Image 10">
				</div>

				<div class="caption randomrotate"
					 data-x="818"
					 data-y="271"
					 data-speed="300"
					 data-start="2000"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p10.jpg" alt="Image 11">
				</div>

				<div class="caption randomrotate"
					 data-x="95"
					 data-y="248"
					 data-speed="300"
					 data-start="2100"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p11.jpg" alt="Image 12">
				</div>

				<div class="caption randomrotate"
					 data-x="762"
					 data-y="165"
					 data-speed="300"
					 data-start="2200"
					 data-easing="easeOutExpo">
					 <img src="images/slides/p12.jpg" alt="Image 13">
				</div>
			</li>

			<!-- THE SECOND SLIDE -->
			<li data-transition="papercut" data-slotamount="15" data-masterspeed="300" data-delay="9400" data-thumb="images/thumbs/thumb2.jpg">
				<img src="images/slides/slide2_wide1.jpg" >

				<div class="caption very_big_white lfl stl"
					 data-x="18"
					 data-y="293"
					 data-speed="300"
					 data-start="500"
					 data-easing="easeOutExpo" data-end="8800" data-endspeed="300" data-endeasing="easeInSine">
					 TIMELINED CAPTIONS
				</div>

				<div class="caption big_white lfl stl"
					 data-x="18"
					 data-y="333"
					 data-speed="300"
					 data-start="800"
					 data-easing="easeOutExpo" data-end="9100" data-endspeed="300" data-endeasing="easeInSine">
					 MOVE CAPTIONS IN AND OUT ON ONE SLIDE
				</div>

				<div class="caption lft ltb"
					 data-x="500"
					 data-y="0"
					 data-speed="600"
					 data-start="1100"
					 data-easing="easeOutExpo" data-end="3100" data-endspeed="600" data-endeasing="easeInSine">
					 <img src="images/slides/drink1.jpg" alt="Image 3">
				</div>

				<div class="caption bold_red_text sft stb"
					 data-x="720"
					 data-y="290"
					 data-speed="300"
					 data-start="1400"
					 data-easing="easeOutExpo" data-end="3300" data-endspeed="300" data-endeasing="easeInSine">
					 STRAWBERRY COCTAIL
				</div>

				<div class="caption big_black sfb stb"
					 data-x="720"
					 data-y="320"
					 data-speed="300"
					 data-start="1700"
					 data-easing="easeOutExpo" data-end="3200" data-endspeed="300" data-endeasing="easeInSine">
					 $ 7.49
				</div>

				<div class="caption lft ltb"
					 data-x="500"
					 data-y="0"
					 data-speed="600"
					 data-start="3600"
					 data-easing="easeOutExpo" data-end="5600" data-endspeed="600" data-endeasing="easeInSine">
					 <img src="images/slides/drink2.jpg" alt="Image 6">
				</div>

				<div class="caption bold_brown_text sft stb"
					 data-x="720"
					 data-y="290"
					 data-speed="300"
					 data-start="3900"
					 data-easing="easeOutExpo" data-end="5800" data-endspeed="300" data-endeasing="easeInSine" >
					 COKE & RUM
				</div>

				<div class="caption big_black sfb stb"
					 data-x="720"
					 data-y="320"
					 data-speed="300"
					 data-start="4200"
					 data-easing="easeOutExpo" data-end="5700" data-endspeed="300" data-endeasing="easeInSine">
					 $ 5.99
				</div>

				<div class="caption lft ltb"
					 data-x="500"
					 data-y="0"
					 data-speed="600"
					 data-start="6100"
					 data-easing="easeOutExpo" data-end="8100" data-endspeed="300" data-endeasing="easeInSine">
					 <img src="images/slides/drink3.jpg" alt="Image 9">
				</div>

				<div class="caption bold_green_text sft stb"
					 data-x="720"
					 data-y="290"
					 data-speed="300"
					 data-start="6400"
					 data-easing="easeOutExpo" data-end="8300" data-endspeed="300" data-endeasing="easeInSine">
					 MOJITO COCTAIL
				</div>

				<div class="caption big_black sfb stb"
					 data-x="720"
					 data-y="320"
					 data-speed="300"
					 data-start="6700"
					 data-easing="easeOutExpo" data-end="8200" data-endspeed="300" data-endeasing="easeInSine">
					 $ 6.79
				</div>
			</li>

			<li data-transition="turnoff" data-slotamount="1" data-masterspeed="300" data-thumb="images/thumbs/thumb3.jpg">
				<img src="images/slides/slide3_wide1.jpg" >

				<div class="caption large_text fade"
					 data-x="509"
					 data-y="290"
					 data-speed="300"
					 data-start="800"
					 data-easing="easeOutExpo">
				</div>

				<div class="caption very_large_black_text randomrotate"
					 data-x="641"
					 data-y="95"
					 data-speed="300"
					 data-start="1100"
					 data-easing="easeOutExpo">
					 SLIDER
				</div>

				<div class="caption large_black_text randomrotate"
					 data-x="642"
					 data-y="161"
					 data-speed="300"
					 data-start="1400"
					 data-easing="easeOutExpo">
					 REVOLUTION
				</div>

				<div class="caption bold_red_text randomrotate"
					 data-x="645"
					 data-y="201"
					 data-speed="300"
					 data-start="1700"
					 data-easing="easeOutExpo">
					 GOT FULLSCREEN VIDEO
				</div>

				<div class="caption sfb"
					 data-x="640"
					 data-y="223"
					 data-speed="300"
					 data-start="2000"
					 data-easing="easeOutBack">
					 <img src="images/slides/video.jpg" alt="Image 7">
				</div>

				<div class="caption sft"
					 data-x="639"
					 data-y="383"
					 data-speed="300"
					 data-start="2300"
					 data-easing="easeOutExpo"  data-linktoslide="4" >
					 <img src="images/slides/videobutton.jpg" alt="Image 8">
				</div>
			</li>

			<!-- THE THIRD SLIDE -->
			<li data-transition="slideleft" data-slotamount="1" data-masterspeed="300" data-thumb="images/thumbs/thumb5.jpg">
				<img src="images/slides/slide4_wide1.jpg" >

				<div class="caption large_text sft"
					 data-x="50"
					 data-y="44"
					 data-speed="300"
					 data-start="800"
					 data-easing="easeOutExpo">
					 TOUCH ENABLED
				</div>

				<div class="caption medium_text sfl"
					 data-x="79"
					 data-y="82"
					 data-speed="300"
					 data-start="1100"
					 data-easing="easeOutExpo">
					 AND
				</div>

				<div class="caption large_text sfr"
					 data-x="128"
					 data-y="78"
					 data-speed="300"
					 data-start="1100"
					 data-easing="easeOutExpo">
					 <span style="color: #ffc600;">RESPONSIVE</span>
				</div>

				<div class="caption lfl"
					 data-x="53"
					 data-y="192"
					 data-speed="300"
					 data-start="1400"
					 data-easing="easeOutExpo">
					 <img src="images/slides/imac.png" alt="Image 4">
				</div>

				<div class="caption lfl"
					 data-x="253"
					 data-y="282"
					 data-speed="300"
					 data-start="1500"
					 data-easing="easeOutExpo">
					 <img src="images/slides/ipad.png" alt="Image 5">
				</div>

				<div class="caption lfl"
					 data-x="322"
					 data-y="313"
					 data-speed="300"
					 data-start="1600"
					 data-easing="easeOutExpo">
					 <img src="images/slides/iphone.png" alt="Image 6">
				</div>
			</li>

			<!-- THE FOURTH SLIDE -->
			<li data-transition="flyin" data-slotamount="1" data-masterspeed="300" data-thumb="images/thumbs/thumb6.jpg">
				<img src="images/slides/slide5_wide.jpg" >

				<div class="caption large_text sfl"
					 data-x="38"
					 data-y="200"
					 data-speed="300"
					 data-start="1000"
					 data-easing="easeOutExpo">
					 A Happy
				</div>

				<div class="caption large_text sfl"
					 data-x="37"
					 data-y="243"
					 data-speed="300"
					 data-start="1300"
					 data-easing="easeOutExpo">
					 Holiday Season
				</div>

				<div class="caption randomrotate"
					 data-x="610"
					 data-y="174"
					 data-speed="800"
					 data-start="1600"
					 data-easing="easeOutExpo">
					 <img src="images/slides/TP_logo.png" alt="Image 4">
				</div>
			</li>
		</ul>

		<div class="tp-bannertimer"></div>
	</div>
</div>

 <!-- jQuery KenBurn Slider  -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script>
	var api;
	jQuery(document).ready(function() {
		 api =  jQuery('.fullwidthabnner').revolution(
						{
							delay:9000,
							startheight:500,
							startwidth:960,

							hideThumbs:10,

							thumbWidth:100,							// Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
							thumbHeight:50,
							thumbAmount:5,

							navigationType:"bullet",				// bullet, thumb, none
							navigationArrows:"nexttobullets",				// nexttobullets, solo (old name verticalcentered), none

							navigationStyle:"round",				// round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom


							navigationHAlign:"center",				// Vertical Align top,center,bottom
							navigationVAlign:"bottom",					// Horizontal Align left,center,right
							navigationHOffset:0,
							navigationVOffset:20,

							soloArrowLeftHalign:"left",
							soloArrowLeftValign:"center",
							soloArrowLeftHOffset:20,
							soloArrowLeftVOffset:0,

							soloArrowRightHalign:"right",
							soloArrowRightValign:"center",
							soloArrowRightHOffset:20,
							soloArrowRightVOffset:0,

							touchenabled:"on",						// Enable Swipe Function : on/off
							onHoverStop:"on",						// Stop Banner Timet at Hover on Slide on/off



							stopAtSlide:-1,
							stopAfterLoops:-1,

							shadow:1,								//0 = no Shadow, 1,2,3 = 3 Different Art of Shadows  (No Shadow in Fullwidth Version !)
							fullWidth:"on"							// Turns On or Off the Fullwidth Image Centering in FullWidth Modus
						});
	});
</script>

</body>
</html>
